<!--自测质量材料打分规则组件-->
<template>
  <div class="content">
    <div class="content-form">
      <div class="form-title">
        <div class="title-content">
          {{ title }}
          <!--下方开关只是模拟测试权限。实际开发需要删除-->
          <vxe-switch v-model="jurisdiction" open-label="编辑" close-label="只读" @change="change"></vxe-switch>
        </div>
      </div>
      <div class="form-table">
        <vxe-grid v-bind="gridOptions" ref="xGrid">
          <template #score_edit="{ row }">
            <vxe-input
              v-model="row[`${gridOptions.customRule.value}`]"
              :min="`${gridOptions.customRule.min}`"
              :max="row[`${gridOptions.customRule.max}`]"
              placeholder="请输入分数"
              type="number"
            ></vxe-input>
          </template>
        </vxe-grid>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const xGrid = ref();
const props = defineProps({
  jurisdiction: {
    //用户权限
    type: Boolean, //数据类型
    required: false, //是否必须
    default: false, //默认值
  },
  title: {
    //组件标题
    type: String, //数据类型
    required: false, //是否必须
    default: "自定义填报", //默认值
  },
  gridOptions: {
    //表格配置
    type: Object, //数据类型
    required: true, //是否必须
  },
});
//实际开发需要删除
const jurisdiction = ref(false); //用户的表格编辑权限
//实际开发需要删除
const emit = defineEmits(["permissionModification"]);
//实际开发需要删除
const change = () => {
  //权限模拟修改
  emit("permissionModification", jurisdiction.value);
};
/**
 * 行合并函数。根据相同的行自动合并
 * @param row 行数据
 * @param _rowIndex 行序号
 * @param column 列数据
 * @param visibleData 表格数据
 * @returns {{colspan: number, rowspan: number}}
 */
const mergeRowMethod = ({ row, _rowIndex, column, visibleData }) => {
  const fields = props.gridOptions.lineJoin; //需要合并的列
  const cellValue = row[column.field]; //当前单元格的值
  if (cellValue && fields.includes(column.field)) {
    //当前单元格的值不为空，且当前单元格的值在需要合并的列中
    const prevRow = visibleData[_rowIndex - 1]; // 获取上一行数据
    let nextRow = visibleData[_rowIndex + 1]; // 获取下一行数据
    if (prevRow && prevRow[column.field] === cellValue) {
      // 如果上一行存在且与当前单元格的值相同，则返回一个单元格的跨度
      return { rowspan: 0, colspan: 0 };
    } else {
      // 初始化行跨度为1
      let countRowspan = 1;
      // 循环遍历直到下一行的值不与当前单元格的值相同
      while (nextRow && nextRow[column.field] === cellValue) {
        // 获取下一行数据
        nextRow = visibleData[++countRowspan + _rowIndex];
      }
      // 如果行跨度大于1，则返回行跨度和列跨度均为1的单元格的跨度
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 };
      }
    }
  }
};
onMounted(() => {
  //调用合并列方法
  props.gridOptions.spanMethod = mergeRowMethod;
});
</script>

<style scoped lang="less">
@import "@/assets/styles/flowDemo/index";
.content {
  width: 100%;
  .content-form {
    padding: 0 24px;
    .form-table {
      width: 100%;
    }
  }
}
</style>
